require(['./config'],() =>{
	require(['template','footer','service'],(template) =>{
		class Shopping{
			constructor() {
			    this.init()
					if (this.cart) {
					  this.calcTotalMoney()
					  this.checksChange()
					  this.setAllCheck()
					}
				
			}
			init () {
			        // 取出localStorage里存的购物车数据
			        const cart = localStorage.getItem('cart')
			        if (cart) {
			          // 渲染表格
			          this.cart = JSON.parse(cart)
					  console.log(this.cart)
			          $('#shop_tbody').html(
			            template('cartTemplate', { cart: this.cart })
			          )
			
			        } else {
			          $('#shop_tbody').hide()
			          $('.main-wu').show()
			        }
			      }
			      checksChange () {
					const _this = this
			        $('.checks').on('change', function () {
					  // 从父级tr身上取到自定义属性data-id
			          const id = $(this).parents('ul').data('id')
			          _this.cart = _this.cart.map(shop => {
			            if (shop.id === id) {
			              shop.check = $(this).prop('checked')
						}
			            return shop
					  })
			          // 把修改好的cart重新存localStorage
					  localStorage.setItem('cart', JSON.stringify(_this.cart))
			          // 重新计算一次总价
			          _this.calcTotalMoney()
			          // 重新设置全选
			          _this.setAllCheck()
			        })
			      }
			      setAllCheck () {
					$('.main-xuan').prop('checked', this.cart.every(shop => shop.check))
			      }
			      calcTotalMoney () {
			        // 第一次遍历的时候：
			        //   后面初始值就是money的值为0，shop就是this.cart[0]
			        //   判断shop是否选中，是的话money就加上这条商品的小计价格，并且把money return出去
			        // 第一次的return会作为下一次的money参数继续计算，这个时候shop就是this.cart[1]
			        //    再去判断shop是否选中，如果没有选中，那就直接return上一次的money，继续参与第三次运算
			        // 当遍历结束，外面的total拿到的就是最后所有选中商品的总价了
			        const total = this.cart.reduce((money, shop) => {
			          if (shop.check) {
			            money += shop.price * shop.count
			          }
			          return money
			        }, 0)
			        $('#Paymoney').html(total.toFixed(2))
			      }
		}
		new Shopping()
		
	})
})